<template>
  <section class="f-order-sale-detail w-card">
    <div class="title-box">
      <span class="title-text">订单ID：{{orderInfo.sysOrderId || '--'}}</span>
    </div>

    <div class="f-card">
      <ul class="f-ul">
        <li>
          <p>下单时间：</p>
          <p>{{ getDateTime(orderInfo.createTime)[6] || '--'}}</p>
        </li>
        <li>
          <p>销售商户：</p>
          <p>{{orderInfo.shopName || '--'}}</p>
        </li>
        <li>
          <p>佣金类型：</p>
          <p>加盟订单</p>
        </li>
        <li>
          <p>订单状态：</p>
          <p>{{ orderStatus[orderInfo.orderStatus] || '--'}}</p>
        </li>
        <li>
          <p>支付金额：</p>
          <p style="color:#F60000">¥ {{orderInfo.payMoney/100 || '--'}}</p>
        </li>
        <li>
          <p>支付方式：</p>
          <p>{{orderInfo.payType == 3? '支付宝': '微信'}}支付</p>
        </li>
        <li>
          <p>支付时间：</p>
          <p>{{ getDateTime(orderInfo.payTime)[6] || '--'}}</p>
        </li>
        <li>
          <p>支付流水号：</p>
          <p>{{orderInfo.payOrderId || '--'}}</p>
        </li>
      </ul>
    </div>
    <div class="f-card">
      <p class="f-title">商品/套餐信息</p>
      <section class="f-goods-box">
        <section class="f-goods">
          <div class="f-goods-card">
            <img :src="orderInfo.headImg" alt="">
            <div class="f-desc-box">
              <p class="f-desc-name">{{orderInfo.goodsName || '--'}}</p>
              <p>
                <span class="f-desc-price">¥ {{orderInfo.payMoney/100 || '--'}}</span>
                <span class="f-desc-price-1">¥ {{orderInfo.totalShowPrice/100 || ''}}</span>
              </p>
            </div>
          </div>
        </section>
        <ul class="f-ul f-goods-ul">
          <li>
            <p>套餐名称：</p>
            <p>{{orderInfo.packageName || '--'}}</p>
          </li>
          <li>
            <p>套餐：</p>
            <p>{{orderInfo.packageGuigeParam || '--'}}</p>
          </li>
          <li>
            <p>用户码：</p>
            <p>{{orderInfo.userCode || '--'}}</p>
          </li>
        </ul>
      </section>
    </div>
    <div class="f-card">
      <p class="f-title">收件信息</p>
      <ul class="f-ul">
        <li>
          <p>收件人：</p>
          <p>{{orderInfo.receiverName || '--'}}</p>
        </li>
        <li>
          <p>联系电话：</p>
          <p>{{orderInfo.receivePhone || '--'}}</p>
        </li>
        <li>
          <p>收货地址：</p>
          <p class="f-weight-bold">{{orderInfo.receiveAddress || '--'}}</p>
        </li>
      </ul>
    </div>
    <div class="f-card">
      <p class="f-title">物流信息</p>
      <ul class="f-ul">
        <li>
          <p>快递公司：</p>
          <p class="f-weight-bold">{{orderInfo.logisticsName || '--'}}</p>
        </li>
        <li>
          <p>快递单号：</p>
          <p>{{orderInfo.logisticsNum || '--'}}</p>
        </li>
        <li>
          <p>快递时间：</p>
          <p class="f-weight-bold">{{ getDateTime(orderInfo.logistStartTime)[6] || '--'}}</p>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import api from '../api.js'

export default {
  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      sysOrderId: route.query.sysOrderId,
      orderInfo: {},

      orderStatus: {
        '5': '待支付',
        '10': '已支付',
        '20': '待发货',
        '30': '已发货',
        '40': '已收货',
        '41': '拒收',
        '100': '异常待处理',
        '110': '超时关闭',
        '120': '订单关闭',
        '130': '已退款',
      },
      discountLevel: {
        '0': '免费',
        '1': '高折扣',
        '2': '低折扣',
        '3': '全价',
      },
    })

    onMounted(() => {
      getOrderJoinDetail()
    })

    const getOrderJoinDetail = () => {
      let json = {
        sysOrderId: state.sysOrderId
      }
      api.orderJoinDetail(json).then(res => {
        state.orderInfo = res.data
      })
    }

    return {
      ...toRefs(state),
      getDateTime
    }
  }
}
</script>

<style lang='scss' scoped>
.f-order-sale-detail {
  box-sizing: border-box;
  padding: 20px;

  > .title-box {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    > .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        align-items: center;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 85px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
    .f-goods-box {
      display: flex;
      align-items: center;
      .f-goods {
        width: 50%;
        .f-goods-card {
          width: 448px;
          padding: 8px 10px;
          background: #ffffff;
          display: flex;
          img {
            width: 152px;
            height: 84px;
            margin-right: 15px;
          }
          .f-desc-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .f-desc-name {
              font-weight: 600;
              font-size: 16px;
              color: #010101;
            }
            .f-desc-price {
              font-weight: 400;
              font-size: 20px;
              color: #f60000;
            }
            .f-desc-price-1 {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              text-decoration-line: line-through;
              margin-left: 10px;
            }
          }
        }
      }
      .f-goods-ul {
        li {
          width: 100%;
        }
      }
    }
  }
}
</style>